<%@page pageEncoding="UTF-8" import="java.util.*, ajaxjs.sql.DAO"%>
<%@taglib prefix="commonTag" 	tagdir="/WEB-INF/tags/common/html"%>
<%@taglib prefix="commonUI" 	tagdir="/WEB-INF/tags/common/UI"%>
<%@taglib prefix="prototypeUI"	tagdir="/WEB-INF/tags/common/Prototype"%>   	

<!DOCTYPE html>
<html>
	<commonTag:head lessFile="/admin/asset/less/main.less">
		<%@ include file="../public/head.jsp" %>
		<style type="text/css">
			td{
				text-align:center;
			}
			select{
				height: 350px;
				width:90%;
			}
		</style>
	</commonTag:head>
    <body>
    	<prototypeUI:nav />
    	<div style="border-top:1px solid white;padding-top:10px;">
    	<table width="95%">
    
    		<tr>
    			<td width="40%">记录列表：</td>
    			<td width="10%"></td>
    			<td width="40%">推荐列表：</td>
    		</tr>
    		<tr>
    			<td>
					<select multiple="multiple" class="list"></select> 
				
    			</td>
    			<td valign="center">&gt;&gt; <br />双击选择到推荐栏目 &gt;&gt;</td>
    			<td>
			    	<%
			    		String tableName = request.getParameter("entry");
			    		if(tableName == null){
			    			out.print(" entry 参数不足！");
			    			return;
			    		}
			    		
			    		DAO dao = new DAO("jdbc/sqlite");
			    		List<Map<String, String>> list = dao.queryAsList("SELECT * FROM " + tableName + " WHERE isHot = 1");
			    	%>
					<select multiple="multiple" class="toSave">
					<% 
						if(list != null)for(Map<String, String> item : list){
					%>
					  <option value="<%=item.get("id")%>"><%=item.get("name") %></option>
					<%}%>
					</select>
    			</td>
    		</tr>
    		<tr>
    		   	<td>
					<button class="pervPage my-btn">上一页</button>
					<button class="nextPage my-btn">下一页</button>
				</td>
    			<td></td>
    			<td>
    				<button class="saveBtn my-btn">保存推荐列表</button>
    			</td>
    		</tr>
    	</table>
		</div>
		<script>
			seajs.use(['bigfoot/data/binding', 'libs/step'], function(_binding, Step){
				var url = '../../service/${param.entry}';
				var select = document.querySelector('select.list');
				var tpl = '<option value="{id}">{name}</option>';
				var render = _binding.list.delegate(null, null, 'result', select, tpl);
				
				bf.data.get(url, {
					start : 0,
					limit: 10
				}, render);
				
		    	var _request = {
	    			pageNo : 0,
	    			pageSize : 10,// 每页记录大小
	    			start:0
		    	};
		    	document.body.regChildClick('button.pervPage', function(){ 
					this.start = this.pageSize * --this.pageNo;
					
					bf.data.get(url, {
						start : this.start, 
						limit : this.pageSize
					}, render);
					
				}.bind(_request));
		    	
		    	document.body.regChildClick('button.nextPage', function(){ 
					this.start = this.pageSize * ++this.pageNo;
					
					bf.data.get(url, {
						start : this.start, 
						limit : this.pageSize
					}, render);
					
				}.bind(_request));

				// 双击移动到旁边的  select
				var targetSelect = document.querySelector('select.toSave');
				select.ondblclick = function(e){
					var el = e.target;
					if(el.tagName == 'OPTION'){
						var isAlreadyIn = false;
						targetSelect.query('option')(function(option){
							if(option.value == el.value){
								isAlreadyIn = true;
							}
						});
						if(!isAlreadyIn)
							targetSelect.appendChild(el);
						else{
							alert('已存在记录!');
						}
					}
				}
				
			// 双击删除！
			document.querySelector('select.toSave').ondblclick = function(e){
				var el = e.target;
				if(el.tagName == 'OPTION'){
					el.parentNode.removeChild(el);
					
				}
			}
			
			var saveBtn = document.querySelector('button.saveBtn');
			if (saveBtn){
				saveBtn.onclick = function(){
					var arr = getIds();
					
				    Step(function () {  
				    	// 复位所有 推荐的  = isHot = false
				    	bf.data.put(url + '/resetHot', {}, this);	
				    }, function (json) {
				    	if(json.isOk){
							for(var i = 0, j = arr.length; i < j; i++){
								bf.data.put(url + '/' + arr[i], {
									isHot : true
								}, this.parallel());
							}
				    	}else{
				    		alert('不能复位！');
				    		return;
				    	}
					},  
					// 获取结果 Show the result when done  
					function showStuff(json) {  
						alert(json.isOk ? '保存推荐列表成功！' : '保存推荐列表失败！');  
					});
				}
			}
		});
			
			function getIds(){
				var selectEl = document.querySelector('.toSave');
				var arr = [];
				selectEl.query('option')(function(option){
					arr.push(option.value);
				});
				
				return arr;
			}
		</script>
   	</body>
</html>